// import React, { useRef, forwardRef } from "react";
// useRef可以获取dom节点
// 加在类组件上，可以获取子组件实例
// 加载函数组件上，可以通过forwardRef来获取子组件的dom元素

// const Child = forwardRef((props, ref) => {
//   return <div ref={ref}>child组件</div>;
// });

// const App = () => {
//   const title = useRef();
//   const child = useRef();

//   const fn = () => {
//     console.log(title.current);
//   };

//   const fn2 = () => {
//     console.log(child.current);
//   };

//   return (
//     <>
//       <h2 ref={title}>useRef</h2>
//       <button onClick={fn}>btn</button>
//       <Child ref={child} />
//       <button onClick={fn2}>btn</button>
//     </>
//   );
// };

// export default App;

// import React, { useState, useEffect } from "react";

// const App = () => {
//   const [count, setCount] = useState(1);

//   useEffect(() => {
//     setTimeout(() => {
//       console.log(count);
//     }, 2000);
//   }, [count]);

//   return (
//     <>
//       <h2>使用useRef来绕过 Capture Value</h2>
//       <p>count: {count}</p>
//       <button
//         onClick={() => {
//           setCount((v) => v + 1);
//         }}
//       >
//         btn1
//       </button>
//       <button
//         onClick={() => {
//           setCount((v) => v - 1);
//         }}
//       >
//         btn2
//       </button>
//     </>
//   );
// };

// export default App;

import React, { useRef } from "react";

const App = () => {
  // useRef还可以用来创建变量
  // useRef创建的变量可以绕过captrue value
  // 但是没有响应式

  // 当一个变量不需要显示在页面上的时候，可以用useRef来创建
  const count = useRef(1);

  const fn = () => {
    console.log(count.current);
  };

  const fn2 = (n) => () => {
    count.current = count.current + n;
    setTimeout(() => {
      console.log(count.current);
    }, 2000);
  };

  return (
    <>
      <h2>使用useRef来绕过 Capture Value</h2>
      <button onClick={fn}>btn</button>
      <p>count: {count.current}</p>
      <button onClick={fn2(-1)}>-</button>
      <button onClick={fn2(1)}>+</button>
    </>
  );
};

export default App;
